<template>
  <div>
    <!-- 相关附件 -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>相关附件</span>
      </div>
      <div class="key">
        <span>序号</span>
        <span>附件名称</span>
        <span>上传人</span>
        <span>上传时间</span>
      </div>
      <el-upload
        class="upload-demo uploads"
        action="https://jsonplaceholder.typicode.com/posts/"
        :on-change="handleChange"
      >
        <el-button size="small" type="primary">选择附件</el-button>
      </el-upload>
      <div></div>
      <div class="main">
        【若点上传按钮无反应，请参考如下文档更新插件】&nbsp;&nbsp;&nbsp;附件问题手册<a
          class="upFinder"
          href="#"
          >上传附件更新问题</a
        >
      </div>
      <div class="but">
        <el-button type="primary" @click="submitForm('ruleForm')"
          >保存</el-button
        >
        <el-button @click="resetForm('ruleForm')">上报</el-button>
      </div>
    </el-card>
  </div>
</template>
<script >
export default {
  name: "RelevantAttachments",
};
</script>

<style scoped lang='scss'>
// 相关附件css------------
.uploads {
  border: 1px solid #000;
  text-align: right;
  height: 50px;
  line-height: 50px;
  padding-right: 50px;
}
.but {
  width: auto;
  margin-top: 20px;
  text-align: right;
  padding-right: 50px;
}

.main {
  text-align: center;
  width: 100%;
  line-height: 30px;
  border: 1px solid #000;
  border-top: 0 solid #000;
}
.key {
  padding: 0 50px;
  display: flex;
  width: auto;
  background-color: #6d93bd;
  color: #fff;
  line-height: 30px;
  justify-content: space-between;
}
// 相关附件 a标签
.upFinder {
  color: #498ab8;
}
</style>